<template>
	<view>
		<!-- 头像上传 -->
		<view class="pic_upload" >
			<button class="avatar-wrapper" open-type="chooseAvatar"@chooseavatar="onChooseAvatar($event)">
				<image src="../../../static/user/pic_logo.png" mode="" v-if="avatarUrl == ''" ></image>
				<image v-else :src="avatarUrl" mode=""></image>
				<text>点击上传头像</text>
			</button>
		</view>
		
		<!-- 昵称 -->
		<view class="nick_name">
			<text>昵称</text>
			<input type="nickname" @blur="getVal" placeholder="请输入昵称" placeholder-style="color:#E1E1E1;font-size: 29rpx" v-model="nickname">
		</view>
		
		<!-- <view class="nick_name">
			<text>真实姓名</text>
			<input type="text" placeholder="请输入真实姓名" placeholder-style="color:#E1E1E1;font-size: 29rpx" v-model="real_name">
		</view> -->
		
		
		<!-- <view class="nick_name">
			<text>手机号</text>
			<input type="number" placeholder="请输入手机号" placeholder-style="color:#E1E1E1;font-size: 29rpx" v-model="mobile" maxlength="11">
		</view> -->
		
		
		<!-- <view class="nick_name">
			<text>上级ID</text>
			<input type="text" placeholder="" disabled="true" placeholder-style="color:#E1E1E1;font-size: 29rpx" v-model="shangji_sharecode" >
		</view> -->
		
		<!-- <view class="nick_name">
			<text>上级信息</text>
			<input type="text" placeholder="" disabled="true" placeholder-style="color:#E1E1E1;font-size: 29rpx" v-model="shangji_userinfo" >
		</view> -->
		
		<!-- 按钮 --> 
		<view class="btns" @click="edit_infos()">
			立即修改
		</view>
		<aui-loading :type="loading.type" :direction="loading.direction" :msg="loading.msg" ref="auiLoadings"></aui-loading>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				nickname: '',
				avatarUrl: '',
				real_name: '',
				mobile: '',
				
				shangji_sharecode:'',
				shangji_userinfo: ''
			};
		},
		onLoad() {
			this.getUserInfo()
			// this.pic_url = uni.getStorageSync('info').avatar
			// this.nickname = uni.getStorageSync('info').nickname
		},
		methods:{
			// 上传图片
			// 微信授权 更改头像 （更新）
			onChooseAvatar:function(e){
				this.avatarUrl = e.detail.avatarUrl
				var tempFilePath = e.detail.avatarUrl
				
				//上传图片
				uni.uploadFile({
					method: "POST",
					name: 'file', 
					url: app.globalData.hostUrl + '/api/upload?store_id=0',
					header:{
						"Authorization": uni.getStorageSync('token')
					},
					filePath: tempFilePath,     //临时路径
					fileType: "file", 
					success: res => {
						if( JSON.parse(res.data).code == 1 ){
							this.avatarUrl = JSON.parse(res.data).data
						}
						
					 }
				})
			},
			
			/* 获取用户信息 */
			getUserInfo(){
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getUserInfo,
				}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						let userInfo = res.data.uInfo;
						that.avatarUrl = userInfo.u_avatar
						that.nickname = userInfo.u_nickname
						that.real_name = userInfo.u_realname
						that.mobile = userInfo.mobile
						if( res.data.u_f_info.share_code == undefined){
							that.shangji_sharecode = '暂无上级'
						}else{
							that.shangji_sharecode = res.data.u_f_info.share_code
						}
						
						if( res.data.u_f_info.share_code == undefined){
							that.shangji_userinfo  = '暂无上级'
						}else{
							that.shangji_userinfo = res.data.u_f_info.u_nickname + '/' + res.data.u_f_info.mobile 
						}
						
						
					}
				}).catch(err => {
				
				})
			},
			getVal(e) {
				console.log('e',e)
				this.nickname = e.detail.value;
				console.log('this.nickname',this.nickname)
			},
			
			// 修改资料
			edit_infos(){
				let that = this;
				if( this.avatarUrl == '' ){
					uni.showToast({
						title: '头像不能为空',
						icon: 'none'
					})
					return
				}
				
				if( this.nickname == '' ){
					uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					})
					return
				}
				
				app.globalRequest({
					api: app.getApi().user.saveInfo,
					method:'post',
					data:{
						u_nickname: that.nickname,
						u_avatar: that.avatarUrl,
					}
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '更新资料成功',
							icon: 'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},1500)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
				
				})
		
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}
	.avatar-wrapper{
		margin: 40rpx auto 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 176rpx;
			height: 176rpx;
			border-radius: 50%;
			
		}
		text{
			color: #C2C2C2;
			font-size: 27rpx;
			text-align: center;
			margin-top: 22rpx;
			position: relative;
			&::after{
				content: '';
				position: absolute;
				right: 0;
				bottom: 60rpx;
				width: 35rpx;
				height: 35rpx;
				background: url('../../../static/user/crame.png');
				background-size: cover;
				z-index: 1000;
			}
		}
	}
	
	.nick_name{
		width: 90%;
		margin: 36rpx auto 0;
		background-color: #FAFBFD;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 26rpx;
		box-sizing: border-box;
		text{
			font-size: 29rpx;
			color: #E1E1E1;
			white-space: nowrap;
			width: 25%;
			text-align: center;
		}
		input{
			width: 85%;
		}
	}
	
	.btns{
		width: 80%;
		margin: 100rpx auto 0;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #EC1818;
		color: #fff;
		font-weight: bold;
		font-size: 37rpx;
		text-align: center;
		border-radius: 50rpx;
	}
	
	
	.avatar-wrapper{
		width: 100%;
		height: 100%;
		padding: 0;
		background-color: rgba(0,0,0,0);
		&::after{
			border: 0;
		}
	}
</style>
